<template>
  <div style="height:800px;">
    <button @click="releaseMemory">释放内存</button>
    <button @click="one">第一个</button>
    <button @click="two">第二个</button>
    <div ref="iframe-container" style="height:700px;">
      <iframe
        v-for="item in list"
        :key="item.id"
        ref="iframeRef"
        :src="item.src"
        :style="frameZIndex(item.id)"
        class="iframe-style"
      />
    </div>
  </div>

</template>

<script>
import Vue from 'vue'
export default {
  data() {
    return {
      // currentUrl: `https://tis.bydauto.com.cn/tis/file/c3d/${this.$route.query.iframeId}/start.htm` // 更改为您要加载的网址
      currentUrl: `https://tis.bydauto.com.cn/tis/file/c3d/20230803121754/start.htm`, // 更改为您要加载的网址
      list: [
        {
          src: 'https://tis.bydauto.com.cn/tis/file/c3d/20230803121754/start.htm',
          id: 1
        }
      ],
      currentId: 1
    }
  },
  mounted() {
    // alert(JSON.stringify(this.$route.params))
    console.info('this.$route.query', this.$route.query)
  },
  created() {
    setInterval(() => {
      if (window.performance && window.performance.memory) {
        const memoryInfo = window.performance.memory
        console.log('内存信息:', memoryInfo)
      } else {
        console.warn('该浏览器不支持获取内存信息的 API。')
      }
      const memoryInfo = window.performance.memory
      const usedJSHeapSize = this.bytesToSize(memoryInfo.usedJSHeapSize)
      const totalJSHeapSize = this.bytesToSize(memoryInfo.totalJSHeapSize)
      const jsHeapSizeLimit = this.bytesToSize(memoryInfo.jsHeapSizeLimit)
      console.log('已使用的堆内存大小:', usedJSHeapSize)
      console.log('堆内存总大小:', totalJSHeapSize)
      console.log('堆内存限制大小:', jsHeapSizeLimit)
    }, 10000)
  },
  methods: {
    bytesToSize(bytes) {
      const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
      if (bytes === 0) return '0 Byte'
      const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10)
      return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i]
    },
    one() {
      const check = this.list.find((item) => {
        return item.id === 1
      })
      this.currentId = 1
      if (!check) {
        this.list.push({
          src: 'https://tis.bydauto.com.cn/tis/file/c3d/20230803121754/start.htm',
          id: 1
        })
      } else {
        console.info('当前是第一个')
      }
      let deleteIndex = -1
      this.list.forEach((item2, index) => {
        if (item2.id === 2) {
          deleteIndex = index
        }
      })
      if (deleteIndex !== -1) {
        // alert('删除id=' + this.list[deleteIndex].id)
        this.list.splice(deleteIndex, 1)
      }

      console.info(this.list)

      // 动态创建组件
      // 动态创建组件
      const MyComponent = Vue.extend({
        created() {
          console.log('Component created')
        },
        destroyed() {
          console.log('Component destroyed')
        },
        template: '<div>My Dynamic Component</div>'
      })

      // 在需要的时候挂载组件
      const instance = new MyComponent().$mount()
      document.getElementById('app').appendChild(instance.$el)

      // 销毁组件
      // instance.$destroy()
    },
    two() {
      const check = this.list.find((item) => {
        return item.id === 2
      })
      this.currentId = 2
      if (!check) {
        this.list.push({
          src: 'https://tis.bydauto.com.cn/tis/file/c3d/20230803121650/start.htm',
          id: 2
        })
      } else {
        console.info('当前是第二个')
      }
      let deleteIndex = -1
      this.list.forEach((item2, index) => {
        if (item2.id === 1) {
          deleteIndex = index
        }
      })
      if (deleteIndex !== -1) {
        // alert('删除id=' + this.list[deleteIndex].id)
        this.list.splice(deleteIndex, 1)
      }
      console.info(this.list)
    },
    frameZIndex(id) {
      if (this.currentId !== '' && this.currentId === id) {
        return 'z-index:100'
      } else {
        return 'z-index:-100'
      }
    },
    releaseMemory() {
      let iframe = this.$refs.iframeRef
      if (iframe) {
        iframe.src = '' // 清空 src
        iframe.remove() // 或者使用其他方法隐藏或销毁 iframe
        iframe = null
        if (typeof window !== 'undefined' && window.gc) {
          window.gc()
        } else {
          console.error('手动触发垃圾回收的方法不在此浏览器中受支持。')
        }
      }

      // 加载下一个 iframe
      // this.currentIframeUrl = 'https://tis.bydauto.com.cn/tis/file/c3d/20230803121754/start.htm' // 设置下一个 iframe 的 URL
      // 创建新的 iframe 元素并加载下一个 URL
      setTimeout(() => {
        const newIframe = document.createElement('iframe')
        newIframe.width = '100%'
        newIframe.height = '600px'
        newIframe.src = 'https://tis.bydauto.com.cn/tis/file/c3d/20230803121650/start.htm' // 设置下一个 iframe 的 URL
        this.$refs.iframeRef = newIframe // 更新引用
        this.$refs['iframe-container'].appendChild(newIframe)
      }, 3000)
    }
  }
  // beforeRouteLeave(to, from, next) {
  //   console.info('beforeRouteLeave')
  //   // 当路由离开此页面时，销毁 iframe 内容以释放内存
  //   const iframe = this.$refs.iframeRef
  //   iframe.src = 'about:blank' // 将 iframe 的 src 设置为空白页面
  //   iframe.contentWindow.document.write('')
  //   iframe.contentWindow.document.clear()
  //   iframe.contentWindow.close()
  //   next()
  //   console.info('beforeRouteLeave end')
  // }
}
</script>
<style lang="scss" scoped>

.iframe-style {
  min-height: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  background: #ffffff;
}
</style>
